<template>
	<view>
		<view style="margin: 20rpx 0;">请选择您当前号所属运营商</view>
		<view class="view-selet">
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="row-css view-selet-cent">
					<view class="uni-input">{{ array[index] }}</view>
					<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_select.png"></image>
				</view>
			</picker>
		</view>
		<view v-if="index > 1" class="column-css">
			<view class="view-text">点击下面“获取授权短信”按钮，收到邀请授权短信后根 据短信提示回复即可。</view>
			<view class="view-text">由于运营商网络问题、手机杀毒软件拦截等原因导致无 法收到邀请短信可通过以下方式处理：</view>
			<view class="row-css view-text" style="align-items: center;">
				<view class="view-rodio"></view>
				请检查手机助手拦截短信列表
			</view>
			<view class="row-css view-text" style="align-items: center;">
				<view class="view-rodio"></view>
				去到网络环境更好的地方重试
			</view>
		</view>
		<view v-if="index == 1" class="autho-code" style="margin-top: 150rpx;" @click="gettoAuth">前往授权</view>
		<view v-if="index > 1" class="autho-code" @click="getLBSAuth">获取授权短信</view>
		<!-- <view class="autho-code" style="margin-top: 80rpx;" @click="cancleauth">取消授权</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			array: ['请选择运营商', '中国联通', '中国移动', '中国电信'],
			index: 0,
			type: '',
			userInfo: {}
		};
	},
	methods: {
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
			switch (this.index) {
				case 1:
					this.type = 'unicom';
					break;
				case 2:
					this.type = 'mobile';
					break;
				case 3:
					this.type = 'telecom';
					break;
				default:
					break;
			}
		},
		gettoAuth() {
			//联通授权
			this.wxRequest({
				url: `${this.API}/driverLocation/auth?username=` + this.userInfo.driverName + '&mobile=' + this.userInfo.mobile + '&type=' + this.type,
				method: 'POST',
				success: res => {
					//联通授权
					uni.navigateTo({
						url: `../personal/powerattorney`
					});
				}
			});
		},
		getLBSAuth() {
			if(this.index== 2){
				uni.showToast({
					title: '移动授权暂未接入！',
					icon: 'none'
				});
			}else{
				//电信移动授权
				this.wxRequest({
					url: `${this.API}/driverLocation/auth?username=` + this.userInfo.driverName + '&mobile=' + this.userInfo.mobile + '&type=' + this.type,
					method: 'POST',
					success: res => {
						uni.showToast({
							title: '短信授权已发送成功，请按短信提示操作！',
							icon: 'none'
						});
					}
				});
			}
		}
	},
	onLoad() {
		this.userInfo = uni.getStorageSync(this.DATA_KEY.userInfo);
	}
};
</script>

<style>
page {
	background: #ffffff;
	padding: 0 20rpx;
	box-sizing: border-box;
}
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-selet {
	border-radius: 5rpx;
	border: 1rpx solid #d9d9d9;
	/* background: #007AFF; */
}
.view-selet-cent {
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
}

.autho-code {
	background: #007aff;
	display: flex;
	justify-content: center;
	border-radius: 10rpx;
	color: #ffffff;
	padding: 25rpx 20rpx;
	margin: 40rpx;
	width: 84%;
	font-size: 30rpx;
}
.view-rodio {
	display: flex;
	width: 15rpx;
	height: 15rpx;
	margin: 7.5rpx;
	border-radius: 50%;
	background: #333333;
}

.view-text {
	color: #333333;
	padding: 15rpx 20rpx;
}
</style>
